<template>
  <div>
    <!-- autofoucs -->
    <!-- 一开始，input框不会渲染到dom元素上 -->
     <input v-if="isSearch" type="text" ref="ipt">
     <button v-else @click="handleClick">点击搜索</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isSearch: false  // 表示当前是否展示搜索框
    }
  },
  methods:{
    handleClick(){
      // 当我们执行这一句的时候 v-if那里的 输入框还没有显示，dom还没有渲染 
      this.isSearch = true
      // 让输入框获取焦点  ==> dom.focus()  

      // Vue中获取dom元素 步骤 
      // 1. 给目标元素添加ref 
      // 2. this.$refs.xxx 
      
      // 在这里立刻获取dom元素，获取不到
      // console.log(this.$refs.ipt)
      this.$nextTick(() => {
        // 获取异步更新后的dom元素 
        this.$refs.ipt.focus()
      })
      
    }
  }
}
</script>

<style>

</style>